<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Shared Interests</title>
<link href="./css/jquery-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
* {
	margin: 0;
	padding: 0;
    font: 0.88em/1 Verdana,sans-serif;
}

#container {
	margin: 10px 0 0 10px;
    font-size: 1.2em;
}

textarea {
	width: 99%;
	border: 1px solid grey;
}

h2 {
	text-align: left;
	color: #333333;
}

div {
	margin: 3px 3px;
	padding: 3px 3px;
}

table, th, td {
    border: 1px solid grey;
}

table {
    width: 500px;
    border-collapse: collapse;
}

th {
    background-color: white;
    padding: 3px 2px 3px 2px;
}

td {
    padding: 3px 2px 3px 2px;
}

.box {
	width: 800px;
	text-align: center;
}

.right {
	text-align: right;
}

img.profile {
    width: 30px;
    height: 30px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="./javascript/util.js"></script>
<script type="text/javascript" >
//Global variables
var pages = {};
var friends = {};
var fan = [];
var perms = 'user_likes, friends_likes';

var page = 0;
var limit = 100;
var friendQuery = 'select uid, name, pic_square from user '
    + 'where uid in ( '
    + '  select uid2 from friend '
    + '  where uid1 = me() '
    + 'limit '+ limit +' offset '+ page * limit
    + ')'
    + 'order by name';

//After loading the page
$(document).ready(function(){

});

function logout(){
    FB.logout(function(){
        FB.getLoginStatus(handleSessionResponse);
    });
}

function login(response){
    FB.login(function(response){
            handleSessionResponse(response);
        }
        ,{perms: perms}
    );
}

//Facebook getLoginStatus function callback handler
function handleSessionResponse(response){

    trace(response);

    //if user log in, show logout button
    if(response.session){
    
        var logoutBtn = $("<input type='button' value='logout'/>").click(function(){
            logout();
        });
    
        $('#loginStatus')
            .empty()
            .html(response.status)
            .append(logoutBtn);
    }

    //if user doesn't log in, show login button
    else{
        var loginBtn = $("<input type='button' value='login'/>").click(function(){
            login(response);
        });
        
        $('#loginStatus')
            .empty()
            .append(loginBtn);
    }

}

function getFriends(){
    FB.api(
        {
            method: 'fql.query',
            query: friendQuery
        },
        function(response){
            //if there is no error occured
            if(!response.error_code){
                mergeFriends(response);
            }
        }
    );
}

function mergeFriends(response){
    //check if it's null
    if(response.length > 0){
        for(index in response){
            friends[response[index].uid] = {name: response[index].name, pic_square: response[index].pic_square};
        }
    }
    
    displayFriends();
}

function displayFriends(){
    
    for(uid in friends){
        $('<img class="profile" src='+friends[uid].pic_square+'/>').appendTo('#friend-container');
    }

}
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
var debug = true;

window.fbAsyncInit = function() {

trace(FB);

    FB.init(
        {
            appId: 'b3129823ca04e8a35f3a380ec6c0f68b'
            , status: true
            , cookie: true
            , xfbml: false
        }
    );
    
trace(FB);
    
    //FB.getLoginStatus(handleSessionResponse);

    //FB.Event.subscribe('auth.statusChange', handleSessionResponse);

    /*
     * Start Point!
     */
    //getFriends();
};
/*
(function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
}());
*/
</script>
<div id="container">
	<h1>FB Shared Interests</h1>
	<div id="loginStatus" class="box right"></div>
    <h2>Friends</h2>
    <div id="friend-container"></div>
	<h2>Shared Interests</h2>
	<div class="box">
        <table id="interestTable">
            <thead>
                <th>Rank</th>
                <th>Name</th>
                <th>Type</th>
                <th>Popularity</th>
                <th>People like this</th>
            </thead>
            <tbody>
                <tr>
                    <td colspan="5">No data </td>
                </tr>
            </tbody>
        </table>
	</div>
</div>
</body>
</html>